<template>
  <div class="center noDrag">
    <div v-for="(tab, index) in state.tabs" :key="index" v-show="index === state.tabIndex">
      <span title="点击可后退,按住可查看历史记录" @click="back(tab)" :class="{ iconfont: true, 'iconarrow-fine-left': true, 'arrow-left': true, enable: tab.canGoBack }"></span>
      <span title="点击可前进,按住可查看历史记录" @click="forward(tab)" :class="{ iconfont: true, 'iconarrow-fine-right': true, 'arrow-right': true, enable: tab.canGoForward }"></span>
      <span v-if="tab.isLoading" title="停止加载此页" @click="stopLoad(tab)" class="iconfont iconclose stopload enable"></span>
      <span v-else title="重新加载此页" @click="reload(tab)" class="iconfont iconrefresh refresh enable"></span>
      <input spellcheck="false" autofocus placeholder="请输入地址" :value="tab.url.startsWith('zchrome-search://') ? '' : tab.url" @input="urlInput(tab, $event)" class="url" @keyup.enter="enter(tab)" />
      <a title="自定义及控制" class="menu" @click="showMenu(tab, index)">⋮</a>
    </div>
  </div>
</template>

<script lang="ts">
import { state } from '@/store/state'
import mutations from '@/store/mutations'
import { BrowserWindow } from 'electron'
import Tab from '@/store/Tab'

const remote = window.require('electron').remote
const win: BrowserWindow = remote.getCurrentWindow()
const { Menu, MenuItem } = remote

export default {
  setup() {
    return {
      state,
      ...mutations,
      back(tab: Tab) {
        tab.view.webContents.goBack()
      },
      forward(tab: Tab) {
        tab.view.webContents.goForward()
      },
      reload(tab: Tab) {
        tab.view.webContents.reload()
      },
      stopLoad(tab: Tab) {
        tab.view.webContents.stop()
      },
      showMenu(tab: Tab) {
        const menu = Menu.buildFromTemplate([
          {
            label: '托盘',
            click: async () => {
              mutations.tray()
            }
          },
          {
            label: '开发者工具',
            accelerator: 'Control+Shift+I',
            click() {
              tab.view.webContents.openDevTools()
            }
          },
          {
            label: '设置',
            click() {
              // this.$router.push({ path: '/settings' })
              mutations.addTab({ url: 'zchrome://settings', nodeIntegration: true })
            }
          },
          {
            label: '退出',
            click() {
              mutations.close()
            }
          }
        ])
        // if (isDevelopment) {
        menu.insert(
          1,
          new MenuItem({
            label: '调试',
            click() {
              win.webContents.openDevTools({
                mode: 'detach'
              })
            }
          })
        )
        // }
        menu.popup()
      },
      urlInput(tab: Tab, e: any) {
        tab.url = e.target.value
      },
      enter(tab: Tab) {
        // #TODO 有待优化
        if (/^[A-Za-z]+:\/\//.test(tab.url) || tab.url.startsWith('javascript:')) {
        } else if (/(^[A-Za-z0-9-_]+\.[A-Za-z]+)|(^localhost(:|\/|$))/.test(tab.url)) {
          tab.url = 'http://' + tab.url
        } else {
          tab.url = 'https://www.baidu.com/s?ie=UTF-8&wd=' + tab.url // 应该设置成可配置
        }
        tab.view.webContents.loadURL(tab.url)
      }
    }
  }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.center {
  background: white;
  border-bottom: 1px solid #d5d9dc;
  height: 36px;
  & > div {
    height: 100%;
    display: flex;
    align-items: center;
    .arrow-left,
    .arrow-right,
    .refresh,
    .stopload {
      border-radius: 50%;
      padding: 5px;
      padding-top: 6px;
      margin-left: 8px;
      color: gray;
      &.enable {
        color: black;
        &:hover {
          background: #d7dadd;
        }
      }

      &.stopload {
        font-weight: bold;
        color: #333;
      }
    }

    .url {
      margin-left: 8px;
      margin-right: 5px;
      border: 0px;
      display: flex;
      flex: 1;
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 20px;
      font-size: inherit;
      height: 29px;
      line-height: 29px;
      outline: none;
      padding: 0 15px;
      background: #f5f5f5;
      &:hover {
        background: #f1f1f1;
      }
      &:focus {
        border: 2px solid #b9d5f8;
      }
    }

    .menu {
      margin-right: 10px;
      border-radius: 50%;
      color: #666666;
      font-weight: bold;
      &:hover {
        background: #e7eaed;
      }
      text-align: center;
      width: 30px;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
